<template>
  <div class="edu-page-warp">
    <el-card shadow="never">
      <div class="edu-page-title">已选定学生信息</div>
      <el-table :data="selectStudentList" style="width: 100%" stripe="true" max-height="250">
        <el-table-column prop="studentId" label="学生学号" min-width="90"/>
        <el-table-column prop="studentName" label="学生姓名" min-width="90"/>
        <el-table-column prop="collegeIdI18n" label="学院" min-width="90"/>
        <el-table-column prop="subjectIdI18n" label="专业" min-width="90"/>
        <el-table-column prop="direction" label="方向" min-width="90"/>
      </el-table>
    </el-card>
    <div class="edu-page-warp">
      <condition-card @reset="reset" @search="searchList" label-width="110px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="院系">
              <el-select v-model="queryForm.collegeId" filterable class="search-item" clearable>
                <el-option v-for="item in source.collegeOptions" :key="item.collegeId"
                           :label="item.collegeIdI18n" :value="item.collegeId"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="职称">
              <el-select v-model="queryForm.titleName" filterable class="search-item" clearable>
                <el-option v-for="item in source.titleOptions" :key="item" :label="item"
                           :value="item"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </condition-card>
      <div style="background-color:#fff;padding-left: 24px">
        <div class="edu-page-title" style="padding-top: 24px;">分配评阅专家</div>
        <div class="edu-opertion-bar">
          <div class="float-left">
            <el-input v-model="queryForm.reviewer" placeholder="请输入评委专家姓名、工号搜索" style="width:300px"
                      @keyup.enter.native="searchList" clearable>
              <i slot="suffix" class="el-icon-search" style="margin-top:10px;cursor:pointer"
                 @click="searchList"></i>
            </el-input>
          </div>
        </div>
        <edu-table ref="teacherTable" :url="getList" :selection="false">
          <edu-table-column label="评阅专家" prop="reviewerName" min-width="80"></edu-table-column>
          <edu-table-column label="院系" prop="collegeIdI18n" min-width="90"></edu-table-column>
          <edu-table-column label="职称" prop="titleName" min-width="100"></edu-table-column>
          <edu-table-column label="操作" min-width="120">
            <template slot-scope="scope">
              <el-button type="text" v-if="!chooseFlag(scope.row)"
                         @click="chooseTeachers(scope.row, 0)">选择
              </el-button>
              <el-button type="text" v-if="chooseFlag(scope.row)"
                         @click="chooseTeachers(scope.row, 1)">取消选择
              </el-button>
            </template>
          </edu-table-column>
        </edu-table>
      </div>
    </div>
  </div>
</template>
<script>
  import API from "common/src/api/underGraduationDesign/assignReviewers";

  export default {
    name: 'assign',
    props: {
      selectStudentList: {
        type: Array,
        default: () => []
      }
    },
    data() {
      return {
        api: API,
        getList: '/api/designservice/reviewManage/getReviewerList',
        //查询参数
        queryForm: {
          collegeId: '',
          titleName: '',
          reviewer: ''
        },
        source: {
          collegeOptions: [], // 学院
          titleOptions: [] // 职称
        }
      };
    },
    mounted() {
      this.getCollege();
      this.getTitleList();
      this.searchList();
    },
    methods: {
      chooseFlag(row) {
        let flag = false
        this.selectStudentList.forEach(function (item) {
          if (row.reviewer == item.reviewer) {
            flag = true
          }
        });
        return flag
      },
      chooseTeachers(row, flag){
        this.api.distributeReviewer({studentInfoList: this.selectStudentList, teacherId: row.reviewer}, flag).then(res => {
          if (window.isSessionDialogOut !== true) {
            window.isSessionDialogOut = true; // 解决会弹出多个过期提示问题
            window.vueApp.showMsgBox({
              message: '操作成功',
              detail: res.data,
              callback: () => {
                window.isSessionDialogOut = false;
                this.$emit("reviewBack");
              }
            });
          }
        });
      },
      // 获取职称
      getTitleList() {
        this.api.getTitleNameList().then(res => {
          this.source.titleOptions = res.data;
        });
      },
      // 查学院
      getCollege() {
        this.api.getCollege().then(res => {
          this.source.collegeOptions = res;
        });
      },
      searchList() {
        this.$refs.teacherTable.search(this.queryForm);
      },
      reset() {
        this.queryForm = {
          collegeId: '',
          titleName: '',
          reviewer: ''
        };
        this.searchList();
      }
    }
  };
</script>
<style lang="scss" scoped>
</style>
